<template>
	<view class="container">
		<!-- 顶部蓝色渐变区域 -->
		<view class="header-section">
			<!-- 返回按钮和标题栏 -->
			<view class="nav-bar">
				<view class="global-header-left" @click="goBack">
					<view class="global-back-button">
						<text class="global-back-icon">‹</text>
					</view>
					<text class="global-back-text">返回</text>
				</view>
			</view>
			
			<!-- 主要内容区域 - 左右两列布局 -->
			<view class="main-content">
				<!-- 左列：活动信息 -->
				<view class="left-column">
					<text class="main-title">团队公益捐步</text>
					<view class="activity-info">
						<text class="time-label">线上活动时间:</text>
						<text class="time-text">2025年11月17日~11月23日(第一周)</text>
						<text class="time-text">2025年11月24日~11月30日(第二周)</text>
					</view>
				</view>
				
				<!-- 右列：统计数据 -->
				<view class="right-column">
					<view class="stat-group">
						<text class="stat-label">团队总捐步数</text>
						<text class="stat-number">{{ formattedTeamTotalSteps }}</text>
					</view>
					
				</view>
			</view>
		</view>
		
		<!-- 团队成员展示 -->
		<view class="members-display">
			<view class="member-card" v-for="(member, index) in teamMembers" :key="index">
				<view v-if="member.name" class="member-content">
					<!-- 头像 - 部分突出于卡片上方 -->
					<view class="avatar-container">
						<image class="member-avatar" :src="member.avatar" mode="aspectFill"></image>
					</view>
					<!-- 用户信息 -->
					<view class="member-info">
						<text class="member-name">{{ member.name }}</text>
						<text class="step-label">今日捐步</text>
						<text class="step-number">{{ member.todaySteps }}</text>
						<text class="step-label">总捐步</text>
						<text class="step-number">{{ member.totalSteps }}</text>
					</view>
				</view>
				<view v-else class="empty-member">
					<image class="plus-icon" :src="getImageUrl('资源 37-8.png')" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		
		<!-- 白色内容区域 -->
		<view class="content-wrapper">
			<view class="content-section">
				<!-- 邀请好友状态 -->
				<view v-if="contentState === 'invite'" class="invite-section">
					<button class="invite-btn" open-type="share">邀请好友组队</button>
					<button class="individual-donate-btn" @click="goToIndividualDonation">＞＞ 参与人个捐步,获取更多好礼 ＜＜</button>
					<text class="invite-tip">单个活动周期内,每人仅可加入1支队伍</text>
				</view>
				
				<!-- 团队任务状态 -->
				<view v-if="contentState === 'task'" class="task-section">
					<view class="task-card">
						<view class="task-header">
							<text class="task-title">{{ weeklyTask.title }}</text>
						</view>
						<view class="task-content">
							<view class="task-description-row">
								<text class="task-description">
									累计捐步<text style="color: #1b6ec1;">{{ weeklyTask.targetSteps }}</text>步,目标达成,每位成员即可解锁1次抽奖机会
								</text>
								<!-- <text class="progress-text">完成度 {{ taskProgressPercent }}%</text> -->
							</view>
							
							<!-- 进度条 -->
							<view class="progress-container">
								<view class="progress-bar">
									<view class="progress-fill" :style="{ width: taskProgressPercent + '%' }"></view>
								</view>
							</view>
							
							<!-- 立即捐步按钮 - 放在进度条下方 -->
							<view class="task-action-section">
								<button class="donate-btn" @click="handleTaskButton">
									{{ taskButtonText }}
								</button>
								<text class="invite-tip">单个活动周期内,每人仅可加入1支队伍</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部插图横幅 -->
		<view class="bottom-banner">
				<image class="banner-image" :src="getImageUrl('bottom.png')" mode="widthFix"></image>
			</view>
		
		<!-- 捐步成功弹窗 -->
		<view v-if="showSuccessModal" class="success-modal-mask" @click="closeSuccessModal">
			<view class="success-modal-content" @click.stop>
				<!-- 关闭按钮 -->
				<view class="close-button" @click="closeSuccessModal">
					<image
						class="close-icon"
						src="/static/资源 1-8.png"
						mode="aspectFit"
					></image>
				</view>
				<!-- 背景图片容器 -->
				<view class="success-modal-bg-wrapper">
					<image
						class="success-modal-bg"
						src="/static/box.png"
						mode="aspectFit"
						:style="{ width: '600rpx', height: '800rpx' }"
					></image>
					<!-- 吉祥物图片 -->
					<image
						class="success-modal-mascot"
						:src="getModalMascotImage(modalButtonText)"
						mode="aspectFit"
					></image>
					<!-- 提示文字 -->
					<view
						class="success-text small"
						:style="{ color: getModalTextColor(modalButtonText) }"
					>
						<template v-if="(modalText || '恭喜您,捐步成功!').includes('\n')">
							<text
								v-for="(line, index) in (modalText || '恭喜您,捐步成功!').split(
									'\n'
								)"
								:key="index"
								>{{ line }}</text
							>
						</template>
						<text v-else>{{ modalText || "恭喜您,捐步成功!" }}</text>
					</view>
					<!-- 点击抽奖按钮 -->
					<view class="lottery-button" @click="handleModalButton">
						{{ modalButtonText }}
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { login, userStore } from '@/api'
	import { getImageUrl } from '@/api/config'
	import { stepDecrypt, uploadStep } from '@/api/step'
	
	export default {
			data() {
			return {
				statusBarHeight: 0,
				// 标记是否首次加载，避免 onLoad 和 onShow 重复请求
				isFirstLoad: true,
				// 是否使用测试数据（用于展示"已成团，立即捐步"状态）
				useTestData: false,
				// 内容显示状态控制：'invite' 邀请好友, 'task' 团队任务
				contentState: 'invite',
				teamMembers: [
					{ name: null, avatar: null, todaySteps: 0, totalSteps: 0 },
					{ name: null, avatar: null, todaySteps: 0, totalSteps: 0 },
					{ name: null, avatar: null, todaySteps: 0, totalSteps: 0 }
				],
				// 团队任务数据
				weeklyTask: {
					title: '本周团队任务',
					description: '累计捐步50000步,目标达成,每位成员即可解锁1次抽奖机会',
					targetSteps: 50000,
					currentSteps: 0,
					completedWeeks: 0,
					totalWeeks: 2
				},
				// 团队统计数据
				teamTotalSteps: 0,
				teamTotalAmount: 0,
				// 团队ID
				teamId: null,
				// 是否已完成团队绑定
				completedTeamBind: false,
				// 步数相关数据
				stepCount: 0, // 当前获取的步数
				stepUuid: '', // 用于上传步数的uuid
				isLoadingStep: false, // 是否正在加载步数
				shouldStopRetry: false, // 是否应该停止重试（遇到不可重试的错误码时设置为 true）
				// 弹窗相关数据
				showSuccessModal: false, // 是否显示成功弹窗
				modalType: 'default', // 弹窗类型：'less3000' | 'once3000' | 'once8000' | 'double8000'
				modalText: '', // 弹窗文案
				modalButtonText: '知道了', // 弹窗按钮文字
				// 抽奖次数数据
				lottryTimes: [] // 抽奖次数数组
			}
		},
		onLoad() {
			// 获取状态栏高度
			const systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight || 0
			// 加载团队数据
			this.loadTeamData()
		},
		onShow() {
			// 页面显示时重新加载数据（可能从邀请页面返回）
			// 首次加载时跳过，避免与 onLoad 重复请求
			if (this.isFirstLoad) {
				this.isFirstLoad = false
				return
			}
			// 从其他页面返回时刷新数据
			this.loadTeamData()
		},
		/**
		 * 微信小程序分享功能
		 * 当用户点击右上角分享按钮时触发
		 */
		onShareAppMessage() {
			// 构建分享路径，带上 teamId 参数
			let sharePath = '/pages/index/index'
			if (this.teamId) {
				sharePath += `?teamId=${this.teamId}`
			}
			
			return {
				title: '您的好友邀请您参加2025体彩爱行走活动',
				imageUrl: 'https://hykoc.oss-cn-beijing.aliyuncs.com/koc/tc2025/share.jpg',
				path: sharePath
			}
		},
		methods: {
			getImageUrl,
			/**
			 * 加载测试数据（用于展示"已成团，立即捐步"状态）
			 */
			loadTestData() {
				// 设置内容状态为任务状态
				this.contentState = 'task'
				
				// 设置团队ID
				this.teamId = '34'
				this.completedTeamBind = true
				
				// 填充3个团队成员数据（将当前用户置顶）
				this.teamMembers = [
					{
						name: '孟古',
						avatar: 'https://hykoc.oss-cn-beijing.aliyuncs.com/static/higc/1762784092620_rw0wfc.jpg',
						todaySteps: 2356,
						totalSteps: 6380
					},
					{
						name: 'd',
						avatar: 'https://hykoc.oss-cn-beijing.aliyuncs.com/static/higc/1762823363047_tp2u9twxfile://temp/19a7075d977_64a',
						todaySteps: 1007,
						totalSteps: 1007
					},
					{
						name: '陈蓉蓉',
						avatar: 'https://hykoc.oss-cn-beijing.aliyuncs.com/static/higc/1762826460549_9o4dql.jpg',
						todaySteps: 546,
						totalSteps: 546
					}
				]
				
				// 设置团队统计数据
				this.teamTotalSteps = 7933 // 6380 + 1007 + 546
				this.teamTotalAmount = (this.teamTotalSteps / 100).toFixed(1) // 79.3
				
				// 设置团队任务数据（使用团队总捐步数作为当前进度）
				this.weeklyTask.currentSteps = this.teamTotalSteps
				// targetSteps 是 50000
			},
			/**
			 * 加载团队数据
			 * 从 login 接口获取团队信息并更新页面数据
			 */
			async loadTeamData() {
				try {
					// 如果使用测试数据，直接设置测试数据并返回
					if (this.useTestData) {
						this.loadTestData()
						return
					}
					
					// 进入时重新获取登录信息，确保展示最新数据
					const loginData = await login({}, { forceRefresh: true })
					
					if (!loginData) {
						console.warn('获取登录数据失败')
						return
					}
					
					// 保存抽奖次数数据
					if (loginData.initData && loginData.initData.lottryTimes) {
						this.lottryTimes = loginData.initData.lottryTimes
					} else {
						this.lottryTimes = []
					}
					
					const teamInfo = loginData.teamInfo
					
					// 保存团队ID
					this.teamId = teamInfo?.teamId || null
					// 保存团队绑定状态
					this.completedTeamBind = teamInfo?.completedTeamBind || false
					
					// 判断是否已组队：teamInfo 不为 null 且成员数量 >= 3
					const hasTeam = teamInfo && 
						teamInfo.members && 
						Array.isArray(teamInfo.members) && 
						teamInfo.members.length >= 3
					
					console.log('[组队状态检查] hasTeam:', hasTeam, 'members count:', teamInfo?.members?.length || 0)
					
					// 设置内容状态
					this.contentState = hasTeam ? 'task' : 'invite'
					
					// 填充团队成员数据（无论是否已组队，都显示成员信息）
					this.teamMembers = []
					let members = (teamInfo && teamInfo.members && Array.isArray(teamInfo.members)) 
						? teamInfo.members 
						: []
					
					for (let i = 0; i < 3; i++) {
						if (i < members.length) {
							const member = members[i]
							// 直接使用 members 中的信息
							
							this.teamMembers.push({
								name: member.nickname || '',
								avatar: member.avatarUrl || getImageUrl('logo.png'),
								todaySteps: parseInt(member.todaySteps || '0', 10),
								totalSteps: parseInt(member.personalTotalSteps || '0', 10)
							})
						} else {
							// 不足3人时用空对象填充
							this.teamMembers.push({ 
								name: null, 
								avatar: null, 
								todaySteps: 0, 
								totalSteps: 0 
							})
						}
					}
					
					// 更新团队统计数据（无论是否达到3人，只要有成员就计算）
					if (teamInfo && teamInfo.members && Array.isArray(teamInfo.members) && teamInfo.members.length > 0) {
						// 团队总捐步数：累加所有成员的个人总步数
						const totalSteps = teamInfo.members.reduce((sum, member) => {
							return sum + parseInt(member.personalTotalSteps || '0', 10)
						}, 0)
						this.teamTotalSteps = totalSteps
						
						// 计算团队公益总金额（假设每100步 = 1元，可根据实际业务调整）
						this.teamTotalAmount = (totalSteps / 100).toFixed(1)
						
						// 更新团队任务数据
						// 使用团队总捐步数作为当前进度
						this.weeklyTask.currentSteps = totalSteps
					} else {
						// 完全没有组队信息时，重置统计数据
						this.teamTotalSteps = 0
						this.teamTotalAmount = 0
						this.weeklyTask.currentSteps = 0
					}
				} catch (error) {
					console.error('加载团队数据失败:', error)
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
				}
			},
			goBack() {
				uni.navigateBack()
			},
			/**
			 * 跳转到个人捐步页面
			 */
			goToIndividualDonation() {
				uni.navigateTo({
					url: '/pages/donation/donation'
				})
			},
			/**
			 * 处理任务按钮点击
			 * 如果任务完成且有抽奖次数则跳转抽奖，否则执行捐步
			 */
			handleTaskButton() {
				if (this.taskProgressPercent < 100) {
					// 任务未完成，执行捐步
					this.donateSteps()
				} else {
					// 任务完成，检查是否有团队抽奖次数
					if (this.hasTeamDonateLotteryTimes) {
						// 有抽奖次数，跳转到抽奖页面
						uni.navigateTo({
							url: '/pages/lottery/index'
						})
					}
					// 如果没有抽奖次数，点击不做任何反应（已完成抽奖）
				}
			},
			/**
			 * 立即捐步
			 * 先获取微信步数，然后上传
			 */
			async donateSteps() {
				// 先获取微信步数
				await this.fetchStepCount()
				// 检查时间是否在9-23点之间
				if (!this.isValidDonationTime()) {
					this.modalText = '请在9-23点期间捐步'
					this.modalButtonText = '知道了'
					this.showSuccessModal = true
					return
				}

				// 检查是否有步数
				if (this.stepCount <= 0) {
					this.modalText = '暂无步数可捐'
					this.modalButtonText = '知道了'
					this.showSuccessModal = true
					return
				}


				// 获取用户当天的累计捐步数并检查是否已达到3万步上限
				try {
					const loginData = await login({}, { forceRefresh: true })
					const todaySteps = loginData?.initData?.todaySteps 
						? parseInt(loginData.initData.todaySteps, 10) || 0
						: 0

					// 检查当天累计捐步数是否已达到3万步上限（最高优先级）
					if (todaySteps >= 30000) {
						// 显示弹窗提示
						this.modalText = '今日捐步已达上限'
						this.modalButtonText = '知道了'
						this.showSuccessModal = true
						return
					}

					// 检查当日步数是否未变化（第二优先级）
					const cachedStepCount = this.getCachedStepCountToday()
					if (cachedStepCount !== null && cachedStepCount === this.stepCount) {
						// 当日步数未变化，显示提示
						this.modalText = '暂无多余步数可捐'
						this.modalButtonText = '知道了'
						this.showSuccessModal = true
						return
					}
				} catch (error) {
					console.error('获取当日累计捐步数失败:', error)
					// 如果获取失败，继续执行捐步流程（不阻止用户捐步）
				}

				// 正常上传步数
				await this.uploadStepData(this.stepCount)
			},
			/**
			 * 检查当前时间是否在9-23点之间
			 * @returns {boolean} 如果在9-23点之间返回true，否则返回false
			 */
			isValidDonationTime() {
				const now = new Date()
				const hour = now.getHours()
				// 9点到23点之间（包含9点和23点）
				return hour >= 9 && hour < 23
			},
			/**
			 * 获取用户步数
			 * 通过微信授权获取加密步数，然后调用后端接口解密
			 */
			async fetchStepCount() {
				// 如果已经遇到不可重试的错误，直接返回
				if (this.shouldStopRetry) {
					console.warn('已遇到不可重试的错误，停止获取步数')
					return
				}

				// 防止重复请求
				if (this.isLoadingStep) {
					return
				}

				// #ifdef MP-WEIXIN
				try {
					this.isLoadingStep = true

					// 1. 先调用 wx.login 获取 code（根据微信文档要求）
					const loginCode = await this.getLoginCode()
					if (!loginCode) {
						console.warn('获取微信登录 code 失败，停止后续尝试')
						this.shouldStopRetry = true
						return
					}

					// 2. 获取微信加密的步数数据
					const weRunData = await this.getWeRunData()
					
					if (!weRunData) {
						// 用户拒绝授权或获取失败，保持默认值
						console.warn('获取微信步数失败或用户拒绝授权，停止后续尝试')
						this.shouldStopRetry = true
						return
					}

					// 3. 调用后端接口解密步数，传递 code、encryptedData、iv 三个参数
					const requestData = {
						code: loginCode,
						encryptedData: weRunData.encryptedData,
						iv: weRunData.iv
					}
					const decryptData = await stepDecrypt(requestData)

					// 4. 更新步数显示和保存uuid
					if (decryptData && decryptData.steps) {
						this.stepCount = parseInt(decryptData.steps, 10) || 0
						// 保存uuid用于后续上传步数
						if (decryptData.uuid) {
							this.stepUuid = decryptData.uuid
						}
					} else {
						console.warn('解密步数失败，返回数据格式异常:', decryptData)
					}
				} catch (error) {
					console.error('获取步数失败:', error)
					// stepDecrypt 接口的任何错误都应该停止重试
					this.shouldStopRetry = true
				} finally {
					this.isLoadingStep = false
				}
				// #endif

				// #ifndef MP-WEIXIN
				// 非微信小程序环境，使用默认值
				console.warn('非微信小程序环境，无法获取步数')
				// #endif
			},
			/**
			 * 获取微信登录 code
			 * 根据微信文档，调用 wx.getWeRunData 前需要先调用 wx.login
			 * @returns {Promise<string | null>}
			 */
			getLoginCode() {
				return new Promise((resolve) => {
					// #ifdef MP-WEIXIN
					uni.login({
						success: (res) => {
							if (res.code) {
								resolve(res.code)
							} else {
								console.warn('获取微信登录 code 失败:', res)
								resolve(null)
							}
						},
						fail: (err) => {
							console.error('调用 wx.login 失败:', err)
							resolve(null)
						}
					})
					// #endif

					// #ifndef MP-WEIXIN
					resolve(null)
					// #endif
				})
			},
			/**
			 * 获取微信运动数据
			 * 需要用户授权运动数据权限
			 * @returns {Promise<{encryptedData: string, iv: string} | null>}
			 */
			getWeRunData() {
				return new Promise((resolve) => {
					// #ifdef MP-WEIXIN
					uni.getWeRunData({
						success: (res) => {
							if (res.encryptedData && res.iv) {
								resolve({
									encryptedData: res.encryptedData,
									iv: res.iv
								})
							} else {
								console.warn('获取微信步数数据格式异常:', res)
								resolve(null)
							}
						},
						fail: (err) => {
							console.warn('获取微信步数失败:', err)
							// 用户拒绝授权或其他错误
							if (err.errMsg && err.errMsg.includes('auth deny')) {
								// 用户拒绝授权，可以提示用户
								uni.showModal({
									title: '需要授权',
									content: '需要获取您的运动数据才能显示步数，请在设置中开启运动数据权限',
									showCancel: false,
									confirmText: '知道了'
								})
							}
							resolve(null)
						}
					})
					// #endif

					// #ifndef MP-WEIXIN
					resolve(null)
					// #endif
				})
			},
			/**
			 * 上传步数数据
			 * @param {number} steps 要上传的步数
			 */
			async uploadStepData(steps) {
				try {
					// 检查是否有uuid
					if (!this.stepUuid) {
						uni.showToast({
							title: '步数数据异常，请重新获取',
							icon: 'none',
							duration: 2000
						})
						return
					}

					// 调用上传步数接口
					const response = await uploadStep({
						uuid: this.stepUuid
					})

					if (response && response.success) {
						// 缓存当日步数
						this.cacheStepCountToday(this.stepCount)
						// 上传成功后，先重新加载团队数据以更新步数（确保团队总步数是最新的）
						await this.loadTeamData()
						
						// 获取当日累计捐步数并显示相应的弹窗
						await this.showDonationResultModal()
					} else {
						uni.showToast({
							title: '捐步失败，请重试',
							icon: 'none',
							duration: 2000
						})
					}
				} catch (error) {
					console.error('上传步数失败:', error)
					uni.showToast({
						title: error?.message || '捐步失败，请重试',
						icon: 'none',
						duration: 2000
					})
				}
			},
			// 切换内容状态
			switchContentState(state) {
				this.contentState = state
			},
			/**
			 * 获取当日日期字符串（用于缓存key）
			 * @returns {string} 格式：YYYY-MM-DD
			 */
			getTodayDateString() {
				const now = new Date()
				const year = now.getFullYear()
				const month = String(now.getMonth() + 1).padStart(2, '0')
				const day = String(now.getDate()).padStart(2, '0')
				return `${year}-${month}-${day}`
			},
			/**
			 * 检查当日是否已经提示过3000步
			 * @returns {boolean}
			 */
			hasShown3000PromptToday() {
				const today = this.getTodayDateString()
				const cacheKey = `donation_3000_prompt_${today}`
				return uni.getStorageSync(cacheKey) === true
			},
			/**
			 * 标记当日已提示过3000步
			 */
			mark3000PromptShown() {
				const today = this.getTodayDateString()
				const cacheKey = `donation_3000_prompt_${today}`
				uni.setStorageSync(cacheKey, true)
			},
			/**
			 * 检查是否已经提示过团队5万步
			 * @returns {boolean}
			 */
			hasShownTeam5WPrompt() {
				const cacheKey = 'team5Send'
				return uni.getStorageSync(cacheKey) === true
			},
			/**
			 * 标记已提示过团队5万步
			 */
			markTeam5WPromptShown() {
				const cacheKey = 'team5Send'
				uni.setStorageSync(cacheKey, true)
			},
			/**
			 * 缓存当日步数
			 * @param {number} stepCount 步数
			 */
			cacheStepCountToday(stepCount) {
				const today = this.getTodayDateString()
				const cacheKey = `donation_step_count_${today}`
				uni.setStorageSync(cacheKey, stepCount)
			},
			/**
			 * 获取当日缓存的步数
			 * @returns {number | null} 返回缓存的步数，如果没有缓存则返回 null
			 */
			getCachedStepCountToday() {
				const today = this.getTodayDateString()
				const cacheKey = `donation_step_count_${today}`
				const cached = uni.getStorageSync(cacheKey)
				return cached !== null && cached !== undefined ? parseInt(cached, 10) : null
			},
			/**
			 * 获取当日累计捐步数并显示相应的弹窗
			 */
			async showDonationResultModal() {
				try {
					// 优先检查团队总步数是否达到5万步且未提示过
					if (this.teamTotalSteps >= 50000 && !this.hasShownTeam5WPrompt()) {
						this.modalType = 'team5W'
						this.modalText = '团队捐步5万成功\n获得1次抽奖机会'
						this.modalButtonText = '立即抽奖'
						this.markTeam5WPromptShown()
						this.showSuccessModal = true
						return
					}
					
					// 调用 login 接口获取最新的当日累计捐步数
					const loginData = await login({}, { forceRefresh: true })
					const todaySteps = loginData?.initData?.todaySteps 
						? parseInt(loginData.initData.todaySteps, 10) || 0
						: 0
					
					// 判断是否已经提示过3000步
					const hasShown3000 = this.hasShown3000PromptToday()
					
					// 根据当日累计捐步数和缓存状态，设置弹窗类型和文案
					if (todaySteps >= 3000 && todaySteps < 8000) {
						// 3000-8000步：第一次到达这个区间，提示获得一次抽奖机会
						if (!hasShown3000) {
							// 第一次到达3000-8000之间
							this.modalType = 'once3000'
							this.modalText = '捐步3000成功\n获得1次抽奖机会'
							this.modalButtonText = '点击抽奖'
							this.mark3000PromptShown()
						} else {
							// 已提示过3000，现在还在3000-8000之间（理论上不应该出现，但为了安全起见）
							this.modalType = 'once3000'
							this.modalText = '捐步8000步\n再得一次抽奖机会'
							this.modalButtonText = '立即捐步'
						}
						this.showSuccessModal = true
						return
					} else if (todaySteps >= 8000) {
						// 达到8000步
						if (hasShown3000) {
							// 已提示过3000，现在到达8000
							this.modalType = 'once8000'
							this.modalText = '捐步8000成功\n获得1次抽奖机会'
							this.modalButtonText = '点击抽奖'
						} else {
							// 一次性到达8000，未提示过3000
							this.modalType = 'double8000'
							this.modalText = '今日捐步已达标\n获得2次抽奖机会'
							this.modalButtonText = '立即抽奖'
							this.mark3000PromptShown()
						}
						this.showSuccessModal = true
						return
					}
					
					// 如果没有特殊步数提示（不足3000步），检查是否完成了7天打卡
					const continueStepInfo = loginData?.continueStepInfo || loginData?.initData?.continueStepInfo || []
					
					// 检查是否完成了7天打卡：必须有7项，且所有 recorded 都是 true
					if (continueStepInfo.length >= 7 && continueStepInfo.every(item => item.recorded === true)) {
						this.modalType = 'sevenDaysComplete'
						this.modalText = '恭喜你已完成7天捐步任务'
						this.modalButtonText = '点击抽奖'
						this.showSuccessModal = true
						return
					}
					
					// 既没有特殊步数提示，也没有完成7天打卡，显示不足3000步的提示
					this.modalType = 'less3000'
					this.modalText = '捐满3000步\n即可解锁抽奖'
					this.modalButtonText = '知道了'
					this.showSuccessModal = true
				} catch (error) {
					console.error('获取当日累计捐步数失败:', error)
					// 如果获取失败，显示默认的成功弹窗
					this.modalType = 'default'
					this.modalText = '恭喜您,捐步成功!'
					this.modalButtonText = '知道了'
					this.showSuccessModal = true
				}
			},
			/**
			 * 关闭成功弹窗
			 */
			closeSuccessModal() {
				this.showSuccessModal = false
			},
			/**
			 * 处理点击弹窗按钮
			 */
			handleModalButton() {
				// 关闭弹窗
				this.closeSuccessModal()
				
				// 如果按钮文字包含"抽奖"，则跳转到抽奖页面
				if (this.modalButtonText && this.modalButtonText.includes('抽奖')) {
					uni.navigateTo({
						url: '/pages/lottery/index'
					})
				}
			},
			/**
			 * 获取弹窗吉祥物图片（通用函数）
			 * @param {string} buttonText - 按钮文本
			 * @returns {string} 返回图片路径
			 */
			getModalMascotImage(buttonText) {
				// 当按钮是"立即捐步"时，使用资源 4.png，否则使用资源 33-8.png
				if (buttonText === '立即捐步') {
					return '/static/资源 4.png'
				}
				return '/static/资源 33-8.png'
			},
			/**
			 * 获取弹窗文字颜色（通用函数）
			 * @param {string} buttonText - 按钮文本
			 * @returns {string} 返回颜色值
			 */
			getModalTextColor(buttonText) {
				// 当按钮是"立即捐步"时，使用蓝色，否则使用红色
				if (buttonText === '立即捐步') {
					return '#1b6ec1'
				}
				return '#f03c32'
			}
		},
		computed: {
		// 计算任务完成度百分比
		taskProgressPercent() {
			return Math.floor((this.weeklyTask.currentSteps / this.weeklyTask.targetSteps) * 100)
		},
			// 格式化团队总捐步数（添加千分位分隔符）
			formattedTeamTotalSteps() {
				return this.teamTotalSteps.toLocaleString('zh-CN')
			},
			// 格式化团队公益总金额
			formattedTeamTotalAmount() {
				return parseFloat(this.teamTotalAmount).toLocaleString('zh-CN', {
					minimumFractionDigits: 1,
					maximumFractionDigits: 1
				})
			},
			/**
			 * 检查是否有团队捐步抽奖次数
			 * @returns {boolean} 如果有 LOTTRY_TYPE_TEAM_DONATE 类型且有次数则返回 true
			 */
			hasTeamDonateLotteryTimes() {
				if (!Array.isArray(this.lottryTimes) || this.lottryTimes.length === 0) {
					return false
				}
				// 查找是否有 lottryType 为 LOTTRY_TYPE_TEAM_DONATE 且有次数
				const teamDonateItem = this.lottryTimes.find(item => 
					item.lottryType === 'LOTTRY_TYPE_TEAM_DONATE'
				)
				if (!teamDonateItem) {
					return false
				}
				// 检查次数是否大于0
				const times = parseInt(teamDonateItem.times, 10) || 0
				return times > 0
			},
			/**
			 * 获取任务按钮文本
			 * @returns {string} 按钮文本
			 */
			taskButtonText() {
				if (this.taskProgressPercent < 100) {
					return '已成团,立即捐步'
				} else {
					// 任务完成，检查是否有抽奖次数
					if (this.hasTeamDonateLotteryTimes) {
						return '立即抽奖'
					} else {
						return '已完成抽奖'
					}
				}
			}
		}
	}
</script>

<style>
	.container {
		height: 100vh;
		background: linear-gradient(to bottom, #035e9d 0%, #e1f3fc 60%);
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	
	/* 顶部蓝色渐变区域 */
	.header-section {
		padding-top: calc(60rpx + env(safe-area-inset-top));
		padding-left: 50rpx;
		padding-right: 50rpx;
		padding-bottom: 70rpx;
		color: #ffffff;
		flex-shrink: 0;
	}
	
	/* 主要内容区域 - 左右两列布局 */
	.main-content {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-top: 20rpx;
	}
	
	/* 左列：活动信息 */
	.left-column {
		flex: 1;
		padding-right: 20rpx;
	}
	
	/* 右列：统计数据 */
	.right-column {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	
	/* 导航栏 */
	.nav-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}
	
	/* 确保全局返回按钮样式正确应用 */
	.global-back-button {
		width: 60rpx !important;
		height: 60rpx !important;
		background: #FF0000 !important;
		border-radius: 50% !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		margin-right: 15rpx !important;
	}
	
	.global-back-icon {
		color: white !important;
		font-size: 40rpx !important;
		font-weight: bold !important;
	}
	
	.global-back-text {
		color: white !important;
		font-size: 28rpx !important;
		font-weight: bold !important;
	}
	
	.global-header-left {
		display: flex !important;
		align-items: center !important;
	}
	
	.nav-icons {
		display: flex;
		gap: 20rpx;
	}
	
	.nav-icon {
		font-size: 32rpx;
		color: #ffffff;
	}
	
	/* 主标题 */
	.main-title {
		font-size: 40rpx;
		font-weight: bold;
		color: #ffffff;
		margin-bottom: 20rpx;
		line-height: 1.2;
	}
	
	/* 活动信息 */
	.activity-info {
		margin-top: 30rpx;
	}
	
	.time-label {
		font-size: 20rpx;
		color: #ffffff;
		display: block;
		margin-bottom: 8rpx;
		font-weight: normal;
	}
	
	.time-text {
		font-size: 20rpx;
		color: #ffffff;
		display: block;
		margin-bottom: 4rpx;
		opacity: 0.9;
		line-height: 1.3;
	}
	
	/* 统计组 */
	.stat-group {
		text-align: right;
		margin-top: 50rpx;
	}
	
	.stat-label {
		font-size: 24rpx;
		color: #ffffff;
		display: block;
		margin-bottom: 8rpx;
		font-weight: normal;
	}
	
	.stat-number {
		font-size: 32rpx;
		font-weight: bold;
		color: #ffffff;
		display: block;
		line-height: 1.1;
	}
	
	/* 内容包装器 */
	.content-wrapper {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		position: relative;
	}
	
	/* 白色内容区域 */
	.content-section {
		background: #ffffff;
		padding: 40rpx 30rpx 40rpx 30rpx;
		margin: 0 20rpx;
		border-radius: 50rpx;
		flex: 1;
		overflow-y: auto;
		position: relative;
		z-index: 1;
	}
	
	/* 团队成员展示 */
	.members-display {
		display: flex;
		gap: 20rpx;
		padding: 0 50rpx;
		/* margin-top: -40rpx; */
		/* margin-bottom: 40rpx; */
		position: relative;
		z-index: 10;
	}
	
	.member-card {
		flex: 1;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0) 100%);
		border-radius: 20rpx;
		padding: 0;
		min-height: 280rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.member-content {
		text-align: center;
		width: 100%;
		position: relative;
		padding-top: 40rpx;
		padding-bottom: 30rpx;
	}
	
	/* 头像容器 - 部分突出于卡片上方 */
	.avatar-container {
		position: absolute;
		top: -50rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
	}
	
	.member-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		border: 4rpx solid #ffffff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	/* 用户信息区域 */
	.member-info {
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
		width: 100%;
		overflow: hidden;
	}
	
	.member-name {
		font-size: 28rpx;
		font-weight: normal;
		color: #4d4d4d;
		margin-bottom: 15rpx;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;
	}
	
	.step-label {
		font-size: 24rpx;
		color: #4d4d4d;
		margin-bottom: 5rpx;
	}
	
	.step-number {
		font-size: 48rpx;
		font-weight: bold;
		color: #4d4d4d;
		margin-bottom: 15rpx;
		line-height: 1;
	}
	
	.total-label {
		font-size: 24rpx;
		color: #4d4d4d;
		margin-bottom: 5rpx;
	}
	
	.total-number {
		font-size: 28rpx;
		font-weight: normal;
		color: #4d4d4d;
	}
	
	.empty-member {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		width: 100%;
		height: 100%;
		min-height: 280rpx;
		padding-top: 93rpx;
	}
	
	.plus-icon {
		width: 60rpx;
		height: 60rpx;
		display: block;
	}
	
	/* 邀请好友区域 */
	.invite-section {
		text-align: center;
	}
	
	.invite-btn {
		width: 100%;
		height: 100rpx;
		background: #FF4444;
		color: white;
		border: none;
		border-radius: 25rpx;
		font-size: 36rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.1);
		margin-bottom: 20rpx;
	}
	
	.individual-donate-btn {
		width: 100%;
		height: 100rpx;
		background: #ffffff;
		color: #FF4444;
		border: 2rpx solid #FF4444;
		border-radius: 25rpx;
		font-size: 32rpx;
		font-weight: normal;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
	}
	
	.invite-tip {
		font-size: 24rpx;
		color: #999999;
		text-align: center;
	}
	
	/* 团队任务区域 */
	.task-section {
		width: 100%;
	}
	
	.task-card {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 0 30rpx;
	}
	
	.task-header {
		margin-bottom: 20rpx;
	}
	
	.task-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #1b6ec1;
	}
	
	.task-content {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	
	.task-description-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 20rpx;
		margin-bottom: 20rpx;
	}
	
	.task-description {
		font-size: 23rpx;
		color: #666666;
		line-height: 1.4;
		flex: 1;
	}
	
	/* 进度条容器 */
	.progress-container {
		margin-top: 0;
	}
	
	.progress-bar {
		width: 100%;
		height: 16rpx;
		background: #f0f0f0;
		border-radius: 8rpx;
		overflow: hidden;
		position: relative;
	}
	
	.progress-fill {
		height: 100%;
		background: linear-gradient(90deg, #007AFF 0%, #5AC8FA 100%);
		border-radius: 8rpx;
		transition: width 0.3s ease;
	}
	
	.progress-text {
		font-size: 20rpx;
		color: #666666;
		text-align: right;
	}
	
	/* 任务操作区域 */
	.task-action-section {
		margin-top: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	/* 立即捐步按钮 */
	.donate-btn {
		width: 100%;
		height: 100rpx;
		background: #FF4444;
		color: white;
		border: none;
		border-radius: 25rpx;
		font-size: 36rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.1);
		margin-bottom: 20rpx;
	}
	
	/* 底部插图横幅 */
	.bottom-banner {

		flex: 1;
        display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.banner-image {
		width: 80%;
		display: block;
		pointer-events: auto;
	}
	
	/* 分享引导弹窗遮罩层 */
	.share-modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.7);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 2000;
		animation: fadeIn 0.3s ease-in-out;
	}
	
	/* 分享引导弹窗内容 */
	.share-modal-content {
		position: relative;
		width: 600rpx;
		max-width: 90%;
		background: #ffffff;
		border-radius: 30rpx;
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		animation: scaleIn 0.3s ease-in-out;
	}
	
	/* 分享卡片 */
	.share-card {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 30rpx;
	}
	
	.share-image {
		width: 100%;
		max-width: 500rpx;
		height: auto;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}
	
	.share-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}
	
	/* 分享引导文字 */
	.share-guide {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 30rpx;
	}
	
	.guide-text {
		font-size: 28rpx;
		color: #666666;
		line-height: 1.6;
		text-align: center;
		margin-bottom: 10rpx;
	}
	
	/* 分享操作按钮 */
	.share-actions {
		width: 100%;
		display: flex;
		justify-content: center;
	}
	
	.share-confirm-btn {
		width: 100%;
		height: 88rpx;
		background: #FF4444;
		color: white;
		border: none;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(255, 68, 68, 0.3);
	}
	
	.share-confirm-btn:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 8rpx rgba(255, 68, 68, 0.2);
	}
	
	/* 弹窗淡入动画 */
	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
	
	/* 弹窗缩放动画 */
	@keyframes scaleIn {
		from {
			transform: scale(0.9);
			opacity: 0;
		}
		to {
			transform: scale(1);
			opacity: 1;
		}
	}
	
	/* 组队成功弹窗遮罩层 */
	.success-modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.7);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
		animation: fadeIn 0.3s ease-in-out;
	}
	
	/* 组队成功弹窗内容 */
	.success-modal-content {
		position: relative;
		width: 600rpx;
		max-width: 90%;
		display: flex;
		flex-direction: column;
		align-items: center;
		animation: scaleIn 0.3s ease-in-out;
	}
	
	/* 背景图片容器 */
	.success-modal-bg-wrapper {
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 150rpx;
	}
	
	/* 背景图片 */
	.success-modal-bg {
		width: 600rpx;
		height: 800rpx;
		border-radius: 20rpx;
	}
	
	/* 关闭按钮 */
	.close-button {
		position: absolute;
		top: 20rpx;
		right: -20rpx;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1001;
		cursor: pointer;
	}
	
	/* 关闭图标 */
	.close-icon {
		width: 60rpx;
		height: 60rpx;
	}
	
	/* 吉祥物图片 */
	.success-modal-mascot {
		position: absolute;
		top: 32%;
		left: 50%;
		transform: translateX(-50%);
		width: 200rpx;
		height: 200rpx;
		z-index: 10;
	}
	
	/* 提示文字 */
	.success-text {
		position: absolute;
		top: 65%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #ff0000;
		font-size: 66rpx;
		font-weight: bold;
		text-align: center;
		z-index: 10;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.success-text.small {
		font-size: 42rpx;
	}
	
	.success-text text {
		display: block;
		line-height: 1.5;
	}
	
	/* 立即抽奖按钮 */
	.lottery-button {
		position: absolute;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 400rpx;
		height: 88rpx;
		background: #f03c32;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		font-size: 36rpx;
		font-weight: bold;
		box-shadow: 0 8rpx 24rpx rgba(255, 0, 0, 0.4);
		transition: all 0.3s ease;
		z-index: 10;
	}
	
	.lottery-button:active {
		transform: translateX(-50%) scale(0.95);
		box-shadow: 0 4rpx 12rpx rgba(255, 0, 0, 0.3);
	}
</style>


